<template>
  <div class="f-ma">
    <!--输入F码-->
    <div class="f-ma-wrap">
      <h1>感谢你，亲爱的朋友！</h1>
      <p class="f-tips">使用F码购买跨境酒款，疾速抵达</p>
      <div class="f-input">
        <div class="f-ma-input"><input id="around-id" type="text" placeholder="请输入F码"></div>
        <div class="history-f">
          <img src="../assets/picture/history.png" width="16" height="16">
          <p @click="sideslipOriginal()">历史记录</p>
        </div>
      </div>
      <div class="sure-btn">
        <button @click="fWine()" :class="{ban: ban}">确认</button>
      </div>
    </div>
    <!--交易中的酒款-->
    <div class="transaction-ing list-topic">
      <h2>交易进行中的酒款</h2>
      <f-wine :wines="winesDeal"></f-wine>
    </div>
    <!--往期酒款-->
    <div class="transaction-past list-topic">
      <h2>往期精选</h2>
      <f-wine :wines="winesAgo"></f-wine>
    </div>
    <!--侧滑内容-->
    <sideslip :sideslipOk="filtering" @upup="hidefilter(sideslipWidth - 76)">
      <div class="filter-origin-topic" :style="{right: rightParent}">
        <div class="filter-content">
          <h1 class="history-recode">历史记录</h1>
          <table class="history-table">
            <tr class="topic">
              <th class="status-change">&nbsp;</th>
              <th>F码</th>
              <th>时间</th>
              <th class="progress-status">状态</th>
            </tr>
            <tr v-for="(historyItem, index) of $store.state.history.data" :key="index" @click="chooseHistory(index)">
              <td><img :src="index===selectHistory ? selectedHistory : historyNormal" width="15" height="15"></td>
              <td>{{historyItem.fCode}}</td>
              <td>{{historyItem.addTime}}</td>
              <td>{{historyItem.orderStatus}}</td>
            </tr>
          </table>
        </div>
        <button @click="hidefilter(sideslipWidth - 76)">确定</button>
      </div>
    </sideslip>
    <!-- 弹窗 -->
    <div class="error-fma" v-show="errorFma">
      <p>{{errorMessage}}</p>
    </div>
  </div>
</template>

<script>
  import selectedHistory from '../assets/picture/history-select.png'
  import historyNormal from '../assets/picture/history-normal.png'

  import fWine from '../components/f-wine.vue'
  import sideslip from '@/components/sideslip'

  import { mapActions } from 'vuex'
  export default{
    name: 'fMa',
    components: {
      fWine,
      sideslip
    },
    data () {
      return {
        selectHistory: '',
        selectedHistory: selectedHistory,
        historyNormal: historyNormal,
        filtering: false,
        sideslipWidth: '',
        rightParent: '',
        wines: '',
        errorFma: false,
        errorMessage: '',
        ban: false,
        animate: false,
        winesAgo: [], // 往期精选
        winesDeal: [] // 交易中酒款
      }
    },
    beforeMount () {
      this.sideslipWidth = document.body.clientWidth || document.documentElement.clientWidth
      this.rightParent = -this.sideslipWidth + 76 + 'px'
    },
    mounted () {
      this.wineShow()
      this.wineShow2()
      if (this.$utils.getCookie('USER_NAME')) {
        this.recodeHistory(this.$utils.getCookie('USER_NAME'))
      }
    },
    methods: {
      ...mapActions([
        'recodeHistory'
      ]),
      // 往期精选
      wineShow () {
        let _this = this
        this.$axios.get('http://www.finewest.cn:8888/fwapi/order/goods/end').then(function (response) {
          for (let i = 0; i < response.data.data.length; i++) {
            response.data.data[i].addTime = _this.$utils.parseCastingDate(response.data.data[i].addTime, 'yyyy.MM.dd')
          }
          _this.winesAgo = response.data.data
        }).catch(function (response) {
          console.log(response)
        })
      },
      // 正在交易
      wineShow2 () {
        let _this = this
        this.$axios.get('http://www.finewest.cn:8888/fwapi/order/goods/ing').then(function (response) {
          for (let i = 0; i < response.data.data.length; i++) {
            response.data.data[i].addTime = _this.$utils.parseCastingDate(response.data.data[i].addTime, 'yyyy.MM.dd')
          }
          _this.winesDeal = response.data.data
        }).catch(function (response) {
          console.log(response)
        })
      },
      // 点击主题后的操作
      sideslipOriginal () {
        this.filtering = true
        this.slide(this.rightParent)
      },
      hidefilter (duration) {
        this.filtering = false
        this.slide(duration)
      },
      // 侧滑动效
      slide (duration) {
        var that = this
        var timer
        clearInterval(timer)
        timer = setInterval(function () {
          var speed = -parseInt(duration) / 8
          speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
          if ((speed >= 0 && parseInt(that.rightParent) >= 0) || (speed <= 0 && parseInt(that.rightParent) <= parseInt(-that.sideslipWidth + 76))) {
            clearInterval(timer)
          } else {
            duration = parseInt(duration) + speed
            that.rightParent = parseInt(that.rightParent) + speed + 'px'
          }
        }, 10)
      },
      fWine () {
        var that = this
        var fValue = document.getElementById('around-id').value
        if (!this.$utils.getCookie('USER_NAME')) {
          this.$router.push({path: '/login'})
        } else if (!fValue) {
          if (that.animate) {
            return false
          } else {
            that.errorMessage = '请输入F码'
            setTimeout(function () {
              that.errorFma = false
              that.animate = false
              // that.ban = false
            }, 2000)
            that.errorFma = true
            that.animate = true
            // that.ban = true
          }
        } else {
          this.$axios.get('http://www.finewest.cn/m/v2/fcode_orders_check.htm?fcode=' + fValue).then(
            function (response) {
              response = response.data
              if (response.succ) {
                that.$router.push({path: '/wine-show', query: {ma: fValue}})
              } else {
                that.errorMessage = response.msg
                var errorTimer
                errorTimer = setTimeout(function () {
                  clearTimeout(errorTimer)
                  that.errorFma = false
                  that.ban = false
                }, 2000)
                that.errorFma = true
                that.ban = true
              }
            }).catch(function (error) {
              console.log(error)
            })
        }
      },
      chooseHistory (index) {
        this.selectHistory = index
      }
    }
  }
</script>

<style lang="scss" scope>
  .f-ma{
    .f-ma-wrap{
      border-bottom: 5px solid #f5f5f5;
      h1{
        font-size: 24px;
        color: #444444;
        margin-top: 55px;
        text-align: center;
      }
      p.f-tips{
        font-size: 12px;
        color: #777777;
        text-align: center;
        margin-top: 24px;
      }
      .f-input{
        position: relative;
        width: 100%;
        text-align: center;
        margin-top: 18px;
        .f-ma-input{
          width: calc(100% - 150px);
          display: inline-block;
          input{
            width: 100%;
            height: 44px;
            outline: none;
            text-align: center;
            padding: 0 10px;
            border: 1px solid #e92d46;
          }
        }
        .history-f{
          position: absolute;
          right: 15px;
          top: 50%;
          transform: translateY(-50%);
          img{
            display: table;
            margin: 0 auto;
          }
          p{
            font-size: 12px;
            color: #777777;
            margin-top: 6px;
          }
        }
      }
      .sure-btn{
        width: calc(100% - 150px);
        display: table;
        margin: 0 auto;
        button{
          width: 100%;
          display: inline-block;
          height:44px;
          color: #FFFFFF;
          background: #e92d46;
          line-height: 44px;
          text-align: center;
          border: none;
          outline: none;
          margin: 35px 0;
          &.ban{
            pointer-events: none;
           }
        }
      }
    }
    .transaction-ing{
      border-bottom: 5px solid #f5f5f5;
    }
    .list-topic{
      h2{
        font-size: 14px;
        color: #e92d46;
        margin: 0 15px;
        height: 43px;
        line-height: 43px;
        text-align: center;
        border-bottom: 1px solid #e0e0e0;
        font-weight: normal;
      }
    }
    .filter-origin-topic{
      width: calc(100% - 76px);
      position: fixed;
      top: 0;
      height: 100%;
      background: #fff;
      z-index: 997;
      max-height: 100%;
      overflow: hidden;
      .filter-content{
        overflow-y: auto;
        max-height: 100%;
        height: 100%;
        margin-bottom: 50px;
        h1.history-recode{
          line-height: 45px;
          font-size: 14px;
          height: 45px;
          color: #000000;
          text-align: center;
          text-indent: 0;
          font-weight: normal;
          background: #f5f5f5;
        }
        table.history-table{
          width: 100%;
          border-collapse: collapse;
          text-align: center;
          tr{
            line-height: 56px;
            td{
              img{
                vertical-align: middle;
              }
            }
          }
          .topic{
            text-align: center;
            border-bottom: 1px solid #e0e0e0;
            line-height: 56px;
            font-size: 12px;
            color: #444444;
            &.th{
               color:#000000;
               font-size: 14px;
             }
             .status-change{
               width: 60px;
             };
            .progress-status{
              width: 80px;
            }
           }
        }
      }
      button{
        background: #e92d46;
        height: 45px;
        line-height: 45px;
        width: 100%;
        position: absolute;
        bottom: 0;
        font-size: 18px;
        color: #ffffff;
        border: none;
      }
    }
    .error-fma{
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.8);
      border-radius: 5px;
      p{
        padding: 20px 30px;
        color: #ffffff;
        font-size: 14px;
      }
    }
  }
  @media screen and (max-width: 320px) {
    .f-ma .filter-origin-topic .filter-content table.history-table .topic .status-change {
      width: 50px;
    }
    .f-ma .filter-origin-topic .filter-content table.history-table .topic .progress-status {
      width: 70px;
    }
  }
</style>
